<template>
  <Button @click="handleOpen">点击打开表单</Button>
</template>

<script>
import { FormDialog, FormLayout, FormItem, Input } from '@formily/vxe-table/src'
import { Button } from 'vxe-table'
import { createSchemaField } from '@formily/vue'
import { h } from 'vue'

const { SchemaField } = createSchemaField({
  components: {
    FormItem,
    Input,
  },
})

// 弹框表单组件
const DialogForm = {
  data() {
    const schema = {
      type: 'object',
      properties: {
        aaa: {
          type: 'string',
          title: '输入框1',
          required: true,
          'x-decorator': 'FormItem',
          'x-component': 'Input',
        },
        bbb: {
          type: 'string',
          title: '输入框2',
          required: true,
          'x-decorator': 'FormItem',
          'x-component': 'Input',
        },
        ccc: {
          type: 'string',
          title: '输入框3',
          required: true,
          'x-decorator': 'FormItem',
          'x-component': 'Input',
        },
        ddd: {
          type: 'string',
          title: '输入框4',
          required: true,
          'x-decorator': 'FormItem',
          'x-component': 'Input',
        },
      },
    }
    return {
      schema,
    }
  },
  render() {
    return h(
      FormLayout,
      { labelCol: 6 },
      {
        default: () => [
          h(SchemaField, { schema: this.schema }),
          h(
            FormDialog.Footer,
            {},
            {
              default: () => [
                h(
                  'span',
                  {
                    style: {
                      marginLeft: '4px',
                    },
                  },
                  {
                    default: () => ['扩展文案'],
                  }
                ),
              ],
            }
          ),
        ],
      }
    )
  },
}

export default {
  components: { Button },
  data() {
    return {}
  },
  methods: {
    handleOpen() {
      FormDialog({ title: '弹窗', showZoom: true, resize: true }, DialogForm)
        .forOpen((payload, next) => {
          setTimeout(() => {
            next({
              initialValues: {
                aaa: '123',
              },
            })
          }, 1000)
        })
        .forConfirm((payload, next) => {
          setTimeout(() => {
            next(payload)
          }, 1000)
        })
        .forCancel((payload, next) => {
          setTimeout(() => {
            next(payload)
          }, 1000)
        })
        .open()
        .then(console.log)
        .catch(console.error)
    },
  },
}
</script>
